<template>
	<!-- #ifdef APP-NVUE -->
	<cell ref="v-index-item">
		<!-- #endif -->
		<view
			class="v-index-item"
			:id="`v-index-item-${id}`"
			:class="[`v-index-item-${id}`]"
		>
			<slot />
		</view>
		<!-- #ifdef APP-NVUE -->
	</cell>
	<!-- #endif -->
</template>

<script>
import props from "./props.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";
// #ifdef APP-NVUE
// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
const dom = uni.requireNativePlugin("dom");
// #endif
/**
 * IndexItem
 * @description
 * @property {String}
 * @event {Function}
 * @example
 */
export default {
	name: "v-index-item",
	mixins: [mpMixin, mixin, props],
	data() {
		return {
			// 本组件到滚动条顶部的距离
			top: 0,
			height: 0,
			id: "",
		};
	},
	created() {
		// 子组件v-index-anchor的实例
		this.anchor = {};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			// 此处会活动父组件实例，并赋值给实例的parent属性
			this.getParentData("v-index-list");
			if (!this.parent) {
				return uni.$u.error(
					"v-index-item必须要搭配v-index-list组件使用"
				);
			}
			uni.$u.sleep().then(() => {
				this.getIndexItemRect().then((size) => {
					// 由于对象的引用特性，此处会同时生效到父组件的children数组的本实例的top属性中，供父组件判断读取
					this.top = Math.ceil(size.top);
					this.height = Math.ceil(size.height);
				});
			});
		},
		getIndexItemRect() {
			return new Promise((resolve) => {
				// #ifndef APP-NVUE
				this.$uGetRect(".v-index-item").then((size) => {
					resolve(size);
				});
				// #endif

				// #ifdef APP-NVUE
				const ref = this.$refs["v-index-item"];
				dom.getComponentRect(ref, (res) => {
					resolve(res.size);
				});
				// #endif
			});
		},
	},
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";
</style>
